<script setup lang="ts">
import {Chart} from "@vue-chart/echart";

const props = defineProps({
  dataSource: {
    type: Array as PropType<any[]>,
    required: true,
    default: () => []
  },
});
// 好中坏评
const rateChartOptions = ref(
    {
      title: {
        text: '评价类型',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: '评论数量',
          type: 'pie',
          radius: '50%',
          data: [
            {
              value: 0,
              name: '差评'
            },
            {
              value: 0,
              name: '中评'
            },
            {
              value: 0,
              name: '好评'
            },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    }
)
// 有无图片
const hasPicChartOptions = ref(
    {
      title: {
        text: '首评有图',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: '评论数量',
          type: 'pie',
          radius: '50%',
          data: [
            {
              value: 0,
              name: '有图'
            },
            {
              value: 0,
              name: '无图'
            },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    }
)
// 是否追评
const hasAppendChartOptions = ref(
    {
      title: {
        text: '追加评论',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: '评论数量',
          type: 'pie',
          radius: '50%',
          data: [
            {
              value: 0,
              name: '有追评'
            },
            {
              value: 0,
              name: '无追评'
            },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    }
)
// 追评图片
const hasPicAppendChartOptions = ref(
    {
      title: {
        text: '追评图片',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: '追评数量',
          type: 'pie',
          radius: '50%',
          data: [
            {
              value: 0,
              name: '有图'
            },
            {
              value: 0,
              name: '无图'
            },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    }
)

const showChart1 = ref(false);
const showChart2 = ref(false);
const showChart3 = ref(false);
const showChart4 = ref(false);
// 计算中评好评差评
const calcData = () => {
  showChart1.value = false;
  let num_1 = 0;
  let num_2 = 0;
  let num_3 = 0;
  props.dataSource.forEach((item) => {
    if (item.rateType == -1) {
      num_1++;
    } else if (item.rateType == 0) {
      num_2++;
    } else if (item.rateType == 1) {
      num_3++;
    }
  });
  rateChartOptions.value.series[0].data = [
    {
      value: num_1,
      name: '差评'
    },
    {
      value: num_2,
      name: '中评'
    },
    {
      value: num_3,
      name: '好评'
    },
  ];
  nextTick(() => {
    showChart1.value = true;
  });
  // 是否带图
  showChart2.value = false;
  let hasPicNum = 0;
  let noPicNum = 0;
  props.dataSource.forEach((item) => {
    if (typeof item.feedPicPathList != 'undefined' && item.feedPicPathList.length > 0) {
      hasPicNum++;
    } else {
      noPicNum++;
    }
  });
  hasPicChartOptions.value.series[0].data = [
    {
      value: hasPicNum,
      name: '有图'
    },
    {
      value: noPicNum,
      name: '无图'
    },
  ];
  nextTick(() => {
    showChart2.value = true;
  });
  // 是否追评
  showChart3.value = false;
  let hasAppendNum = 0;
  let noAppendNum = 0;
  props.dataSource.forEach((item) => {
    if (typeof item.appendedFeed != 'undefined') {
      hasAppendNum++;
    } else {
      noAppendNum++;
    }
  });
  hasAppendChartOptions.value.series[0].data = [
    {
      value: hasAppendNum,
      name: '有追评'
    },
    {
      value: noAppendNum,
      name: '无追评'
    },
  ];
  nextTick(() => {
    showChart3.value = true;
  });

  // 追评是否带图
  showChart4.value = false;
  let hasPicAppendNum = 0;
  // let noPicAppendNum = 0;
  props.dataSource.forEach((item) => {
    if (item.appendedFeed && item.appendedFeed.appendFeedPicPathList && item.appendedFeed.appendFeedPicPathList.length > 0) {
      hasPicAppendNum++;
    } else {
      // noPicAppendNum++;
    }
  });
  hasPicAppendChartOptions.value.series[0].data = [
    {
      value: hasPicAppendNum,
      name: '有追图'
    },
    {
      value: hasAppendNum - hasPicAppendNum,
      name: '无追图'
    },
  ];
  nextTick(() => {
    showChart4.value = true;
  });

  // console.log( props.dataSource,'查看追评是否会有图片');

}
watch(() => props.dataSource, () => {
  calcData();
},{
  deep: true
});
onMounted(() => {
  calcData();
});
</script>

<template>
  <a-row type="flex">
    <a-col flex="1">
      <Chart :options="rateChartOptions" v-if="showChart1" style="height: 300px"></Chart>
    </a-col>
    <a-col flex="1">
      <Chart :options="hasPicChartOptions" v-if="showChart2" style="height: 300px"></Chart>
    </a-col>
    <a-col flex="1">
      <Chart :options="hasAppendChartOptions" v-if="showChart3" style="height: 300px"></Chart>
    </a-col>
    <a-col flex="1">
      <Chart :options="hasPicAppendChartOptions" v-if="showChart4" style="height: 300px"></Chart>
    </a-col>
  </a-row>
</template>

<style scoped>

</style>
